<template>
  <van-popup
    v-model="pickerShow"
    style="width: 100%; height: 100%"
    :close-on-click-overlay="false"
  >
<!--    <van-nav-bar :title="point.lng + point.lat" fixed />-->
    <div class="selected" v-if="point.lng && point.lat">
      地址：{{address}}
    </div>
    <div class="container" id="container"></div>
    <div class="close">
      <van-button type="info" size="large" @click="$emit('close')">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import Utils from '../../utils'
import http from '../../utils/request'
import wx from 'weixin-js-sdk'
import { Toast } from 'vant'

const AMap = window.AMap
export default {
  name: 'Map',
  data () {
    return {
      pickerShow: true,
      list: [],
      center: [113.687238, 34.758278],
      point: {
        lng: null,
        lat: null
      }
    }
  },
  props: ['location', 'address'],
  methods: {
    initMap () {
      const map = new AMap.Map('container', {
        center: this.center,
        zoom: 10
      })
      let marker
      map.on('click', (e) => {
        const lnglat = e.lnglat
        this.point = {
          lng: lnglat.lng,
          lat: lnglat.lat
        }
        this.$emit('select', this.point)

        if (marker) map.remove(marker)

        marker = new AMap.Marker({
          position: e.lnglat,
          title: '定位'
        })
        this.$parent.pickMap(this.point)
        map.add(marker)
      })

      if (this.location && this.location[0] && this.location[1]) {
        map.setCenter(this.location)
        marker = new AMap.Marker({
          position: this.location,
          title: '定位'
        })
        map.add(marker)

        this.point = {
          lng: this.location[0],
          lat: this.location[1]
        }
      }

      this.map = map
    },
    initPosition () {
      const _this = this
      if (this.location && this.location[0] && this.location[1]) return
      if (Utils.isWeApp()) {
        http.get('/api/getWeSign?appId=' + sessionStorage.getItem('AppId') + '&url=' + location.href).then(response => {
          if (response.code === 'ok') {
            // 生成签名
            // jsapi_ticket 后台获取
            // noncestr 随机字符串
            // timestamp 当前时间戳
            // url 当前url，不算hash值
            // 按照以上顺序以键值对的形式连接起来（所有属性值均为原始值），在通过sha1加密形成签名。
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: sessionStorage.getItem('AppId'), // 必填，公众号的唯一标识
              timestamp: response.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: response.data.nonceStr, // 必填，生成签名的随机串
              signature: response.data.signature, // 必填，签名
              jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
            })
            wx.ready((res) => {
              console.log('成功')
              // 微信api定位
              wx.getLocation({
                type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
                success: function (res) {
                  _this.center = [res.longitude, res.latitude]
                  _this.map.setCenter(_this.center)
                }
              })
              // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
              // this.isWxConfig = true // 放开扫码按钮限制
            })
            wx.error((res) => {
              console.log('失败')
              _this.$toast.fail('定位失败')
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查    看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            })
          } else {
            Toast(response.msg)
          }
        })
      } else {
        // 支付宝api定位
        // eslint-disable-next-line no-undef
        AlipayJSBridge.call('getCurrentLocation', { requestType: 0, bizType: '$s' }, function (result) {
          if (result.error) {
            _this.$toast.fail(result.errorMessage)
          } else {
            _this.center = [result.longitude, result.latitude]
          }
        })
      }
      // AMap.plugin('AMap.Geolocation', function () {
      //   var geolocation = new AMap.Geolocation({
      //     // 是否使用高精度定位，默认：true
      //     enableHighAccuracy: true,
      //     // 设置定位超时时间，默认：无穷大
      //     timeout: 10000,
      //     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
      //     buttonOffset: new AMap.Pixel(10, 20),
      //     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      //     zoomToAccuracy: true,
      //     //  定位按钮的排放位置,  RB表示右下
      //     buttonPosition: 'RB'
      //   })
      //
      //   geolocation.getCurrentPosition(function (status, result) {
      //     if (status === 'complete') {
      //       onComplete(result)
      //     } else {
      //       onError(result)
      //     }
      //   })
      //
      //   function onComplete (data) {
      //     _this.map.setCenter(data.position)
      //   }
      //
      //   function onError (data) {
      //     AMap.plugin('AMap.CitySearch', function () {
      //       const citySearch = new AMap.CitySearch()
      //       citySearch.getLocalCity(function (status, result) {
      //         if (status === 'complete' && result.info === 'OK') {
      //           // 查询成功，result即为当前所在城市信息
      //           const center = result.bounds.getCenter()
      //           if (_this.map) {
      //             _this.map.setCenter(center)
      //           }
      //           _this.center = [center.lng, center.lat]
      //         } else {
      //           _this.$toast.success('定位失败！')
      //         }
      //       })
      //     })
      //   }
      // })
    }
  },
  mounted () {
    this.initMap()
    this.initPosition()
  }
}
</script>

<style scoped lang='less'>
.container {
  position: absolute; left: 0; top: 0;
  width: 100%;
  height: calc(100vh);
}
.selected {
  position: absolute; top: 45px;
  width: 100%; height: 40px; z-index: 100;
  background: #fff;
  line-height: 45px; text-align: center;
}
.close {
  position: absolute; bottom: 50px;
  width: 90%; height: 40px; z-index: 100;
  padding: 0 5%;
}
</style>

<style lang="less">
.amap-copyright, .amap-logo {
  z-index: -1;
}
</style>
